<template>
  <div id="container">
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="查询条件">
            <el-input v-model="formInline.keyword" placeholder="请输入要查询的关键字"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button type="default" @click="addMyStock">新增自选股</el-button>
          </el-form-item>
        </el-form>

        <el-row>

          <el-col span="6" style="display: flex">
            <el-statistic
              group-separator=","
              :value="$store.state.user.realName"
              :title="'开户人'"
            >
              <template slot="formatter">
                 {{ $store.state.user.realName }}
              </template>
            </el-statistic>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="totalMarketValue"
              :title="'总市值'"
            >

            </el-statistic>

            <el-statistic
              group-separator=","
              :precision="2"
              :value="totalProfitLoss"
              :title="'总盈亏'"
            >
              <template slot="formatter">
                <div v-if="totalProfitLoss<0" style="color: green">
                  {{ totalProfitLoss }}
                </div>
                <div v-else style="color: red">
                  {{ totalProfitLoss }}
                </div>
              </template>
            </el-statistic>

          </el-col>
          <br>
          <el-divider></el-divider>
        </el-row>
        <el-table
          size="small"
          :data="myStockPager"
          border
          :header-cell-style="tableHeaderColor"
          :cell-style="cellContentStyle"
          style="width: 100%">
          <el-table-column
            fixed
            prop="id"
            label="编号"
            width="80">
          </el-table-column>
          <el-table-column
            fixed
            prop="stockCode"
            label="股票代码"
            width="100">
          </el-table-column>
          <el-table-column
            fixed
            prop="stockName"
            label="股票名称"
            width="100">
          </el-table-column>
          <el-table-column
            fixed
            prop="stockPrice"
            label="买入价格"
            width="100">
          </el-table-column>
          <el-table-column
            fixed
            prop="stockNum"
            label="买入数量(手)"
            width="100">
          </el-table-column>
          <el-table-column
            fixed
            prop="stockMarketValue"
            label="买入市值"
            width="100">
          </el-table-column>
          <el-table-column
            prop="stockTime"
            label="买入时间"
            width="100">
          </el-table-column>
          <el-table-column
            prop="currentStockPrice"
            label="当前价格"
            width="80">
          </el-table-column>
          <el-table-column
            prop="currentMarketValue"
            label="当前市值"
            width="80">
          </el-table-column>
          <el-table-column
            prop="profileLoss"
            label="盈亏"
            width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.profileLoss < 0" style="color:green">
                {{ scope.row.profileLoss }}
              </div>
              <div v-else style="color: red">
                {{ scope.row.profileLoss }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="stockUser"
            label="持有人"
            width="120">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="160">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.stockCode)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="doUpdate(scope.row.expensesId)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="12" :offset="6" style="margin-top: 10px;text-align: center">
            <el-pagination
              :current-page.sync="currentPage"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :pager-count="15"
              layout="prev, pager, next"
              :total="myStockList.length">
            </el-pagination>
          </el-col>
        </el-row>


      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "myselect.vue",
  data() {
    return {
      pageSize: 10,   //每页的记录数
      currentPage: 1, //当前的页号，
      formInline: {
        keyword: '',
      },
      /*
      myStockList:[
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        },
        {
          stockId: 1,
          stockCode: '002186',
          stockName: '全聚德',
          stockPrice: 13.87,
          stockNum: 20,
          marketValue: 27740,
          stockTime: '2023-06-17',
          currentPrice: 12.19,
          currentMarketValue: 24380,
          profitLoss: -3360,
          stockUser: '王大锤'
        }
      ]*/

      myStockList: []
    }
  },
  computed: {
    totalMarketValue: function () {
      let total = 0;
      for (let i = 0; i < this.myStockList.length; i++) {
        total += parseFloat(this.myStockList[i].currentMarketValue);
      }
      return total;
    },

    totalProfitLoss: function () {
      let total = 0;
      for (let i = 0; i < this.myStockList.length; i++) {
        total += parseFloat(this.myStockList[i].profileLoss);
      }
      return total;
    },

    myStockPager: function () {
      return this.myStockList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
  },
  mounted() {
    this.initMyStockList();
  },
  methods: {
    initMyStockList() {
      this.$store.dispatch('queryUserStockListRealInfo', this.$store.state.user.uid).then(resp => {
        if (resp.code === 200) {
          console.log(resp.data);
          this.myStockList = resp.data;
        }
      })
    },

    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'text-align: center;color: #426ab3'
    },
    cellContentStyle({row, column, rowIndex, columnIndex}) {
      return "text-align: center;"
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
      //console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      //console.log(this.currentPage)  //点击第几页
    },
    doSearch() {

    },
    addMyStock() {
      this.$router.push({path: `/stock/add`})
    },
    handleClick(stockCode){
      this.$router.push({path: `/stock/details?code=`+stockCode})
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 10px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
